import type { ProColumns, ActionType } from '@ant-design/pro-components';
import { ProTable, PageContainer } from '@ant-design/pro-components';
import { useState, useRef } from 'react';
import { Modal, Image, Button } from 'antd';
import { ExportOutlined } from '@ant-design/icons';
import { getList, getAllList } from '@/services/home';
import * as XLSX from 'xlsx';
import './index.css';
function exportToExcel(data, filename) {
  const customHeaders = [
    '籍贯',
    '家长姓名',
    '生日',
    '身高',
    '体重',
    '性别',
    '手机号',
    '运动经历',
    '性格特征',
    '父母运动背景',
    '姓名',
  ];
  const formatData = data.map((item) => {
    return Object.fromEntries(
      Object.entries(item).map(([_, value], index) => {
        return [customHeaders[index], value];
      }),
    );
  });

  const ws = XLSX.utils.json_to_sheet(formatData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  XLSX.writeFile(wb, filename);
}
export default () => {
  const [modalVisit, setModalVisit] = useState(false);
  const [rowData, setRowData] = useState<Record<string, any>>();
  const tabelRef = useRef<ActionType>();
  const openDialog = (record: any) => {
    setRowData(record);
    setModalVisit(true);
  };
  const columns: ProColumns[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      title: '序号',
      width: 48,
    },
    {
      title: '孩子姓名',
      copyable: true,
      dataIndex: 'name',
      order: 2,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      order: 2,
    },
    {
      title: '出生年月',
      dataIndex: 'birthday',
      order: 2,
      search: false,
    },
    {
      title: '性格',
      dataIndex: 'characteristic',
      order: 2,
      search: false,
    },
    {
      title: '父母姓名',
      copyable: true,
      dataIndex: 'parName',
      order: 2,
      search: false,
    },
    {
      title: '籍贯',
      dataIndex: 'birthPlaceName',
      order: 2,
      search: false,
    },
    {
      title: '身高',
      dataIndex: 'height',
      order: 2,
      search: false,
    },
    {
      title: '体重',
      dataIndex: 'weight',
      order: 2,
      search: false,
    },
    {
      title: '手机号',
      copyable: true,
      dataIndex: 'mobile',
    },
    {
      title: '运动经验',
      dataIndex: 'sportsExperience',
      search: false,
    },
    {
      title: '父母运动背景',
      dataIndex: 'parSportsExperience',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: 200,
      search: false,
      render: (_, record) => {
        return [
          record.photo.split(',').filter((item) => item).length > 0 && (
            <a key="info" onClick={() => openDialog(record)}>
              查看照片
            </a>
          ),
        ];
      },
    },
  ];
  return (
    <>
      <PageContainer ghost>
        <ProTable
          columns={columns}
          cardBordered
          actionRef={tabelRef}
          request={async (params) => {
            const { current: currentPage, ...req } = params;
            const data = await getList({
              ...req,
              currentPage,
            });
            return {
              data: data.list,
              success: true,
              total: data.total,
            };
          }}
          rowKey="_id"
          search={{
            labelWidth: 'auto',
            span: 4,
          }}
          options={{
            setting: {
              listsHeight: 400,
            },
          }}
          pagination={{
            pageSize: 10,
          }}
          toolBarRender={() => [
            <Button
              key="button"
              icon={<ExportOutlined />}
              onClick={() => {
                getAllList().then((data) => {
                  // console.log(data);
                  exportToExcel(
                    data.map(({ _id, __v, photo, ...rest }) => {
                      return rest;
                    }),
                    '用户信息.xlsx',
                  );
                });
              }}
              type="primary"
            >
              导出
            </Button>,
          ]}
        />
      </PageContainer>
      {rowData && (
        <Modal
          width="30%"
          style={{
            textAlign: 'center',
          }}
          open={modalVisit}
          onOk={() => {
            setModalVisit(false);
          }}
          title="相关照片"
          onCancel={() => setModalVisit(false)}
        >
          <Image.PreviewGroup
            items={rowData.photo
              .split(',')
              .map((item: string) => 'http://web-cc.top' + item)}
          >
            {rowData.photo.split(',')?.[0] && (
              <Image
                width={200}
                src={'http://web-cc.top' + rowData.photo.split(',')?.[0]}
              />
            )}
          </Image.PreviewGroup>
        </Modal>
      )}
    </>
  );
};
